/** 直接自执行 */
const query = (function() {
    const query = {};
    /** 不需要分两步取值 */
    const search = /.*\?([^\?]+)/.exec(location.href)[1];
    /** 使用三元直接赋值 */
    const searchArr = search.indexOf("&") ? search.split("&") : search.split();

    searchArr.forEach((item) => {
        const queryArr = item.split("=");
        query[queryArr[0]] = queryArr[1];
    });

    return query;
})();
console.log(query);
fetch("http://chst.vip:1234/api/getcategorybyid?categoryid=" + query.categoryid)
    .then((body) => body.json())
    .then((res) => {
        console.log(res);
        res.result.forEach(
            (item) =>
            (nav_title.innerHTML = `<a href="?title=${query.title}&categoryid=${query.categoryid}">${item.category}></a>`)
        );
    });

/** 总数保存在全局 */
let totalCount = 0;

/** 当前页 */
let pageid = 1;

/** 点击上/下一页 */
const handleChangeOptionNum = () => {
    for (const item of btn_info) {
        if (Number(item.value) === pageid) {
            console.log(item.value, 999);
            item.selected = true;
        }
    }
};

/** 单独的dom操作从接口中拿出来处理 */
const prevDom = document.getElementsByClassName("prev")[0];
const nextDom = document.getElementsByClassName("next")[0];

prevDom.onclick = () => {
    if (pageid <= 2) {
        prevDom.disabled = true;
    } else {
        prevDom.disabled = false;
        nextDom.disabled = false;
    }

    pageid--;

    handleChangeOptionNum();

    getdata(query.categoryid + "&pageid=" + pageid);
};

nextDom.onclick = () => {
    if (pageid <= 0) {
        prevDom.disabled = "true";
    } else {
        prevDom.disabled = null;
    }
    if (pageid >= Math.ceil(totalCount) - 1) {
        nextDom.disabled = "true";
    }

    pageid++;

    handleChangeOptionNum();

    getdata(query.categoryid + "&pageid=" + pageid);
};

function getdata(url = query.categoryid + "&pageid=1") {
    fetch("http://chst.vip:1234/api/getproductlist?categoryid=" + url)
        .then((body) => body.json())
        .then((res) => {
            /** 数量保存 */
            totalCount = res.totalCount / 10;
            let html = "";
            res.result.forEach((item) => {
                // console.log(item);
                html += `
                    <li>
                        <a href="productlist.html?categoryid=${item.categoryId}&productid=${item.productId}&price=${/\d+/.exec(item.productPrice)}" class="clearfix" data-product=${item.productiId}>
                            <div class="img fl">${item.productImg}</div>
                            <div class="infoR">
                                <div class="title">
                                    <h4>${item.productName}</h4>
                                    <div class="price">${item.productPrice}</div>
                                </div>
                                <div class="other">
                                    <span class="take_price">${item.productQuote}</span>
                                    <i class="talkabout">${item.productCom}</i>
                                </div>
                            </div>
                        </a>
                    </li>
                    `;
                uu.innerHTML = html;
            });

            /** 仅当当前页为1时重新渲染option */
            if (pageid === 1) {
                let html2 = "";
                for (let i = 0; i < Math.ceil(totalCount); i++) {
                    const num = i + 1;
                    html2 += `<option class="opt" value=${num}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${num}/${Math.ceil(
            totalCount
          )}</option>`;
                }
                btn_info.innerHTML = html2;
            }
        });
}
getdata();